﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Web Socket Pong</title>
	<link href='reset.css' rel='stylesheet' />
	<link href='main.css' rel='stylesheet' />
	<script src='pong.js' type='text/javascript'></script>
	<script src='server.js' type='text/javascript'></script>
	<script src='client.js' type='text/javascript'></script>
    <meta charset="UTF-8" />
  </head>
    <body onload="initialize()">
		<div id="container">
			<div id="connection">
				<input type="button" value="Connect to server" onclick="connect()" />
				 Addres: <input type="textbox" value="localhost:8080" id="location" />
			</div>
			<div id="connecting">
				<img src="images/throbber.gif" id="throbber" />
			</div>
			<div id="gaming">
				Player name: <input type="textbox" value="PlayerName" id="playerName" />
				<div id="host">
					<input type="button" value="Host new game" onclick="hostGame()" />
					GameName: <input type="textbox" value="MyGame" id="gameName" />
				</div>
				<div id="connect">
					<input type="button" value="Connect to game" onclick="connectGame()" />
					<select id="games">
					</select>
					 <input type="button" value="Refresh list" onclick="refreshList()" />
				</div>
			</div>
			<div id="gameStart">
				<input id="start" type="button" disabled="true" value="Start Game" onclick="gameStart()">
				
			</div>
			
			<div id="clientReady">
				<input id="ready" type="button" value="Ready" onclick="iAmReady()">
			</div>
			<div id="game">
				0:0
			</div>	
			<div id="border">
			<select id="playersList" size="4">
				</select>
			<canvas id="canvas" width="800" height="420"></canvas>
			</div>
			
			
			
			
		</div>
    </body>
</html>